<script lang="ts" setup>
import { bodyRows } from "@/config/ads_ids";
import i18n from "@/locales/i18n";
import { useRefModel } from "@/utils/hooks";
defineOptions({
  name: "HomeFirstItem",
});
let props = defineProps({
  content: {
    type: [String],
  },
  title: {
    type: [String],
  },
  item: {
    type: [Object],
    default: () => ({}),
  },
  isShowReadMore: {
    type: [Boolean],
    default: false,
  },
  expandText: {
    type: [String],
    default: i18n.global.t("title07"),
  },
  handleExpand: {
    type: [Function],
    default: () => () => {},
  },
  coverImg: {
    type: [String],
  },
  ads_id_320_100: {
    type: [String, Number],
  },
  isShowAdvert: {
    type: [Boolean],
    default: true,
  },
  ads_type: {
    type: [String, Number],
    default: 1, // 320 * 100
  },
  ads_class: {
    type: [String],
    default: "br-rb-lb-10",
  },
  isShowDetailAdvert: {
    type: [Boolean],
    default: false,
  },
  bodyRows: {
    type: [String, Number],
    default: bodyRows.value,
  },
  calc_type: {
    type: [String, Number],
    default: 2, // 1: 第一个卡片 2: 卡片列表
  },
});
let emit = defineEmits([
  "update:isShowReadMore",
  "update:content",
  "update:title",
  "update:item",
  "update:coverImg",
  "update:ads_id_320_100",
  "update:isShowAdvert",
  "update:ads_type",
  "update:ads_class",
  "update:isShowDetailAdvert",
  "update:bodyRows",
  "update:calc_type",
]);
let isShowReadMore = useRefModel(props, "isShowReadMore", emit);
let content = useRefModel(props, "content", emit);
let item = useRefModel(props, "item", emit);
let title = useRefModel(props, "title", emit);
let expandText = useRefModel(props, "expandText", emit);
let coverImg = useRefModel(props, "coverImg", emit);
let ads_id_320_100 = useRefModel(props, "ads_id_320_100", emit);
let isShowAdvert = useRefModel(props, "isShowAdvert", emit);
let ads_type = useRefModel(props, "ads_type", emit);
let ads_class = useRefModel(props, "ads_class", emit);
let isShowDetailAdvert = useRefModel(props, "isShowDetailAdvert", emit);
let body_rows = useRefModel(props, "bodyRows", emit);
let calc_type = useRefModel(props, "calc_type", emit);
</script>
<template>
  <div>
    <div class="home-first-item">
      <div class="poster-info">
        <LargeImg v-model:coverImg="coverImg" />
        <MediaIntro v-model:item="item" />
      </div>
      <ArticleEllipsisContent
        v-model:content="content"
        v-model:title="title"
        v-model:item="item"
        v-model:isShowReadMore="isShowReadMore"
        v-model:expandText="expandText"
        v-model:is-show-advert="isShowAdvert"
        v-model:ads_id_320_100="ads_id_320_100"
        v-model:ads_type="ads_type"
        v-model:ads_class="ads_class"
        v-model:is-show-detail-advert="isShowDetailAdvert"
        v-model:bodyRows="body_rows"
        v-model:calc_type="calc_type"
        :handleExpand="handleExpand"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-first-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  row-gap: 10px;
  background-color: #ffffff;
  box-shadow: 0px 2px 4px 1px rgba(108, 108, 108, 0.19);
  border-radius: 10px;
  .poster-info {
    position: relative;
    height: 200px;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
  }
}
</style>
